<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="box1">
			<div id="box">
				<button type="button" onclick="fn()">点我获取</button>
				<br />
				1<br />
				2<br />
				3<br />
				4<br />
				5<br />
				6<br />
				7<br />
				8<br />
				9<br />
				10<br />
				11<br />
				12<br />
				13<br />
				14<br />
				15<br />
				16<br />
				17<br />
				18<br />
				19<br />
				20<br />
				1111111111111111111111111111111111111111111111111111
				<button type="button" onclick="fn()">点我获取</button>
			</div>
			<div id="box3">
				box3
			</div>
		
		<script type="text/javascript">
			
			
			
			function fn(){
				var box=document.getElementById("box");
				var offsetHeight=box.offsetHeight;//内容高度+上border+下border+上paddding+下padding
				var offsetWidth=box.offsetWidth;//内容宽度+左border+右border+左paddding+右padding
				console.log("offsetHeight:200+5+1+5+1:",offsetHeight,"offsetWidth:200+5+1+5+1:",offsetWidth);
			   
				console.log("////////////////////////");
			   
				var offsetLeft=box.offsetLeft;//左margin+left
				var offsetTop=box.offsetTop;//上margin+top
				var offsetParent=box.offsetParent;
				console.log("offsetLeft:",offsetLeft,"offsetTop:",offsetTop,"offsetParent:",offsetParent);
			   
				console.log("////////////////////////");
			   
			   
			   
				var clientHeight=box.clientHeight;
				var clientWidth=box.clientWidth;
				console.log("box clientHeight:",clientHeight,"box clientWidth:",clientWidth);
			   
				var box3=document.getElementById("box3");
				var clientHeight1=box3.clientHeight;
				var clientWidth1=box3.clientWidth;
				console.log("box3 clientHeight1:",clientHeight1,"box3 clientWidth1:",clientWidth1);
			   
			   
			   
				console.log("////////////////////////");
				console.log("////////////////////////");
				var scrollHeight=box.scrollHeight;
				var scrollWidth=box.scrollWidth;
				var scrollLeft=box.scrollLeft;
				var scrollTop=box.scrollTop;
			   
				console.log("scrollHeight:",scrollHeight,"scrollWidth:",scrollWidth,"scrollLeft:",scrollLeft,"scrollTop:",scrollTop);
			   
						   
						   
			}
		</script>
	</body>
</html>
